<template>
  <div class="container">
    <a-space direction="vertical" style="width: 100%" :size="16">
      <a-card style="width: 100%" title="商家提现">
        <a-form :model="formState">
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="商家名称">
                <a-input
                  style="width: 100%"
                  v-model:value="formState.name"
                  placeholder="输入商家名称"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="商家账号">
                <a-input
                  style="width: 100%"
                  v-model:value="formState.phone"
                  placeholder="输入商家账号"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="提现方式">
                <a-select placeholder="提现方式" v-model:value="formState.type">
                  <a-select-option value="0">全部</a-select-option>
                  <a-select-option value="1">微信</a-select-option>
                  <a-select-option value="2">支付宝</a-select-option>
                  <a-select-option value="3">银行卡</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="提现状态">
                <a-select
                  placeholder="提现状态"
                  v-model:value="formState.state"
                >
                  <a-select-option value="1">申请中</a-select-option>
                  <a-select-option value="2">成功</a-select-option>
                  <a-select-option value="3">拒绝</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="购买时间">
                <a-range-picker
                  v-model:value="dateTime"
                  @change="handleDateChange"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>

        <div class="layout-flexSpace">
          <a-space wrap>
            <a-button type="primary" @click="handleSearch">查询</a-button>
            <a-button @click="handleReset">重置</a-button>
          </a-space>
          <a-space wrap>
            <a-button type="primary" @click="handleExport">导出</a-button>
          </a-space>
        </div>
      </a-card>

      <a-card>
        <a-button
          style="margin-bottom: 16px"
          type="primary"
          @click="handleExport"
          >批量转账</a-button
        >
        <a-table
          :row-selection="{
            selectedRowKeys: state.selectedRowKeys,
            onChange: onSelectChange,
          }"
          :dataSource="dataSource"
          :columns="fundsColumns"
          :pagination="pagination"
          @change="handleChangeSize"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'state'">
              {{
                record.state == 1
                  ? "申请中"
                  : record.state == 2
                  ? "成功"
                  : record.state == 3
                  ? "拒绝"
                  : "未知"
              }}
            </template>
            <template v-else-if="column.key === 'type'">
              {{
                record.type == 1
                  ? "微信"
                  : record.type == 2
                  ? "支付宝"
                  : record.type == 3
                  ? "银行卡"
                  : "未知"
              }}
            </template>
            <template v-else-if="column.key === 'action'">
              <a-space>
                <a-button @click="handleEdit(record)">查看</a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </a-space>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { fundsColumns } from "./columns.js";
import { getWithdrawList, exportWithdrawList } from "@/api/finanical";
import { exporeFile } from "@/utils/exporeFile";
const pagination = ref({
  current: 1,
  pageSize: 10,
  defaultPageSize: 10,
  total: 0,
  showSizeChanger: true,
  showTotal: (total) => `共 ${total} 条`,
});
// 更改时间
const dateTime = ref([null, null]);
const handleDateChange = (date, dateString) => {
  dateTime.value = date;
  formState.value.startTime = dateString[0];
  formState.value.endTime = dateString[1];
};
const formState = ref({
  page: pagination.value.current,
  pageSize: pagination.value.pageSize,
  name: undefined,
  phone: undefined,
  state: undefined,
  type: undefined,
  startTime: undefined,
  endTime: undefined,
});
const dataSource = ref([]);
// 获取table数据
const getWithdrawListFn = async () => {
  const { data } = await getWithdrawList(formState.value);
  dataSource.value = data.list;
  pagination.value.total = data.total;
};
const state = reactive({
  selectedRowKeys: [],
  loading: false,
});
const onSelectChange = (selectedRowKeys) => {
  console.log("selectedRowKeys changed: ", selectedRowKeys);
  state.selectedRowKeys = selectedRowKeys;
};
function handleSearch() {
  formState.value.page = 1
  formState.value.pageSize = 10
  getWithdrawListFn();
}
function handleReset() {
  dateTime.value = [null, null];
  formState.value = {
    page: 1,
    pageSize: 10,
    categoryId: undefined,
    subCategoryId: undefined,
    searchCondition: undefined,
    status: undefined,
  };
  pagination.value.current = 1
  pagination.value.pageSize = 10
  getWithdrawListFn();
}

const handleExport = async () => {
  const data = await exportWithdrawList(formState.value);
  exporeFile("提现列表.xls", data);
};
function handleChangeSize(page) {
  formState.value.page = page.current;
  formState.value.pageSize = page.pageSize;
  pagination.value.current = page.current;
  pagination.value.pageSize = page.pageSize;
  getWithdrawListFn();
}
onMounted(() => {
  getWithdrawListFn();
});
</script>

<style lang="less">
.img-item {
  display: flex;
  flex-direction: column;
  align-items: center;

  .img-label {
    margin-top: 6px;
    color: #9599a5;
    font-size: 12px;
  }
}
</style>
